<template>
    <div style="height:100vh;overflow:hidden">
        <div class="bg" style="height:calc(100vh - 60px)">
            <XHeader
                :left-options="{backText:''}"
                style="background-color: #55BEC1;"
                class="tabbar"
            ><span v-if="!isread">我的收藏</span><span v-if="isread">最近阅读</span>
            <router-link to="/" class="fa fa-home ri" sort="right"></router-link>
            </XHeader>
            <p style="margin:47px 0 0 0"></p>

            
            <div v-if="!isread">
                <div class="list"  v-for="(c,i) in collections">
                    <div>
                        <router-link :to="'/novel/'+c._id">
                            <img :src="'/api/images/books/'+c.avatar">
                        </router-link>
                    </div>
                    <div style="flex-grow:1">
                        <div style="display:flex;justify-content: space-between;height:30px">
                            <router-link :to="'/novel/'+c._id">
                                <span class="collname">{{c.name}}</span>
                            </router-link>
                            <span @touchstart="delCollections(c._id)" class="del">弃书</span>
                        </div>
                        <p class="catalog"><span>{{c.state}}：</span><span>{{c.catalog[c.catalog.length-1]}}</span>&emsp;<span style="color:#999;font-size:13px">11-6</span></p>
                    </div>   
                </div>
            </div> 
            
            <div v-if="isread">
                <div class="list"  v-for="(c,i) in collections">
                    <div>
                        <router-link :to="'/novel/'+c._id">
                            <img :src="'/api/images/books/'+c.avatar">
                        </router-link>
                    </div>
                    <div style="flex-grow:1">
                        <div style="height:30px">
                            <router-link :to="'/novel/'+c._id">
                                <span class="collname">{{c.name}}</span>
                            </router-link>
                            <span @touchstart="delCollections(c._id)" class="book-state" :class="{wan:c.state=='完结',lian:c.state=='连载中'}">{{c.state}}</span>
                        </div>
                        <p class="catalog"><span>上次读到：</span><span>{{c.readin}}</span>&emsp;<span style="color:#999;font-size:13px">11-6</span></p>
                    </div>   
                </div>
            </div>  
        </div>
        <div style="height:60px;background-color:#55BEC1;line-height:60px;font-size:15px;margin-top:20px;position:fixed;bottom:0;width:100%">
            <span style="color:white">联系在线客服请关注公众号：</span>
            <span style="color:red">书海小说网</span>
        </div>
    </div>
</template>

<script>
    import { XHeader } from 'vux'
    export default{
        data:function(){
            return {
                collections:[],
                isread:null,
            }
        },
        components:{
            XHeader
        },
        mounted:function(){
            if(!this.$store.state.islogin){
                this.$vux.alert.show({
                    title:"请先登录",
                    onHide(){
                        location.href = "/#/login"
                    }
                })
            }else{
                if(this.$route.params.name=="read"){
                    this.isread = true;
                    this.http.get("/api/users/getRead").then(res=>{
                        if(!res.data.err){ 
                            for(var i=0;i<res.data.data.length;i++){
                                this.collections.push({
                                    avatar:res.data.data[i].avatar,
                                    name:res.data.data[i].name,
                                    _id:res.data.data[i]._id,
                                    readin:res.data.readin[i]
                                });
                            }
                        }  
                    })
                }else{
                    this.http.get("/api/users/getcollections").then(res=>{
                        if(!res.data.err){
                            this.collections = res.data.data;
                        }  
                    })
                }
            }
            
        },
        methods:{
            delCollections:function(id){
                this.http.get("/api/users/delcollections",{params:{id:id}}).then(res=>{
                    if(!res.data.err){
                        this.$vux.alert.show({
                            title:res.data.msg,
                            onHide(){
                                location.reload();
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>
    /*.bg{
        margin-top: 40px;
    }*/
    .tabbar{
        position: fixed;
        top: 0;
        z-index: 5;
        width: 100%;
    }
    .ri{
        position: absolute;
        right: 8px;
        font-size: 30px;
        top: 8px;
        color: white;
    }
    .list{
        background-color: white;
        display: flex;
        padding: 13px 20px;
        text-align: left;
        border-top: solid 1px #ddd;
        border-bottom: solid 1px #ddd;
    }
    .list img{
        width: 50px;
        height: 65px;
        margin-right: 10px;
    }
    .collname{
        line-height: 30px;
        font-weight: bold;
        color: #444;
    }
    .del{
        display: inline-block;
        width: 50px;
        height: 30px;
        font-size: 12px;
        line-height: 30px;
        text-align: center;
        color: #55BEC1;
        border: solid 1px  #55BEC1;
        border-radius: 5px;
    }
    .catalog{
        color: #777;
        font-size: 15px;
        margin: 6px 0 0 0;
    }
    .book-state{
        display: inline-block;
        width: 50px;
        font-size: 12px;
        text-align: center;
        padding: 0 6px;
        line-height: 22px;
        color: white;
        margin-left: 10px;
    }
    .wan{
        background-color: #f7897e;
    }
    .lian{
        background-color: #55BEC1;
    }
</style>